<template>
	<view class="page">

		<custom-navigation title="营业概况">
		</custom-navigation>

		<view class="flex-row-center"
			style="background-color: #38C09EFF;padding-top: 20rpx;padding-left: 24rpx;padding-right: 24rpx;padding-bottom: 22rpx;">
			<view class="search-box flex-row-center"  @click.stop="showPicker=true">
				<!-- <image src="/static/search.png"></image> -->
				<view class="input" v-model="searchStr">{{start_time.length==0?'请选择时间':start_time+'至' +end_time}}</view>
				<image src="/static/rili.png" class="qrimag"></image>
			</view>

		</view>

		<scroll-view class="body-scroll" scroll-y="true">

			<view class="box">
				<view class="title-box flex-row-center">
					营业收入
					<image src="../../static/help.png" @click="showDialog(0)"> </image>
				</view>
				<view class="box-total">
					<view class="item flex-column" style="margin-top: 32rpx;">
						<view class="flex-row">
							<view class="flex-column" style="flex: 1;margin-left: 74rpx;">
								<view class="text">实收金额</view>
								<view class="text1">￥{{stats_data.a || 0}}</view>
							</view>
							<view class="line"></view>
							<view class="flex-column" style="flex: 1;margin-left: 98rpx;">
								<view class="text">销售金额</view>
								<view class="text1">￥{{stats_data.b || 0}}</view>
							</view>
						</view>
						<view class="flex-row" style="margin-top: 32rpx;">
							<view class="flex-column" style="flex: 1;margin-left: 74rpx;">
								<view class="text">退款金额</view>
								<view class="text1">￥{{stats_data.c || 0}}</view>
							</view>
							<view class="line"></view>
							<view class="flex-column" style="flex: 1;margin-left: 98rpx;">
								<view class="text">充值金额</view>
								<view class="text1">￥{{stats_data.d || 0}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="box">
				<view class="title-box flex-row-center">
					销售概况
					<image src="../../static/help.png" @click="showDialog(1)"> </image>
				</view>
				<view class="xs-total">
					<view class="item flex-column" style="margin-top: 32rpx;">
						<view class=" flex-column" style="flex: 1;">
							<view class="flex-row">
								<view class="text" style="width: 300rpx;">销售总额</view>
								<view class="text">销售总笔数</view>
							</view>
							<view class="flex-row">
								<view class="text1" style="width: 300rpx;">￥{{sale_amount_all_total}}</view>
								<view class="text1">{{sale_count_all_total}}</view>
							</view>
							<Line-chart :dataAs="lineData" v-if="lineData" canvasId="ht1" labelKey="label"
								valueKey="value" :yAxisAs="{
         formatter: {
             type: 'percent' //type:number percent String,额外参数:fixed:NUmber,name:String
         }
     }" />
						</view>
					</view>
				</view>
			</view>

			<view class="box">
				<view class="title-box flex-row-center">
					支付方式分析
					<image src="../../static/help.png" @click="showDialog(2)"> </image>
				</view>
				<view class="xs-total">
					<view class="item flex-column" style="margin-top: 32rpx;">
						<view class=" flex-column" style="flex: 1;">

							<ring-chart :dataAs="pieData" v-if="pieData" canvasId="index_ring_1" :titleAs="{
									title: {
										name: ''
									},
									subtitle: {
										name: ''
									}
								}" />
						</view>
					</view>
				</view>
			</view>


			<view class="box">
				<view class="title-box flex-row-center">
					订单渠道来源
					<image src="../../static/help.png" @click="showDialog(3)"> </image>
				</view>
				<view class="flex-row xs-channel-total" style="margin-top: 35rpx;">
					<view class="text">{{order_channel_type==0?'销售总额：':"销售总笔数："}}</view>
					<view class="text1">
						{{order_channel_type==0?'￥'+(order_channel_data.sale_total||'0') :(order_channel_data.sale_count||'0') }}
					</view>
				</view>
				<view class="xs-channel-switch flex-row-center">
					<view :class="order_channel_type==0?'check':'uncheck'" @click="order_channel_type=0">金额</view>
					<view :class="order_channel_type==1?'check':'uncheck'" @click="order_channel_type=1">订单数</view>

				</view>
				<view class="chart flex-row-center">
					<view :style="{'flex':getChannelFlex(0),'backgroundColor':'#58A55C','height':'64rpx'}"></view>
					<view :style="{'flex':getChannelFlex(1),'backgroundColor':'#FF8D1A','height':'64rpx'}"></view>
					<view :style="{'flex':getChannelFlex(2),'backgroundColor':'#2A82E4','height':'64rpx'}"></view>
				</view>
				<view class="chart-lable flex-column">
					<view class="item1 flex-row-center">
						<view class="box" style="background-color: #58A55C; "></view>
						<view class="text1">Android</view>
						<view class="text1">
							{{order_channel_type==0?'￥'+(order_channel_data.android_sale_amount||'0'):(order_channel_data.android_sale_count||'0')+"笔"}}
						</view>
						<view class="text1">{{(getChannelFlex(0)*100).toFixed(2)*1}}%</view>
					</view>
					<view class="item1 flex-row-center">
						<view class="box" style="background-color: #FF8D1A; "></view>
						<view class="text1">IOS</view>
						<view class="text1">
							{{order_channel_type==0?'￥'+(order_channel_data.ios_sale_amount||'0'):(order_channel_data.ios_sale_count||'0')+"笔"}}
						</view>
						<view class="text1">{{(getChannelFlex(1)*100).toFixed(2)*1}}%</view>
					</view>
					<view class="item1 flex-row-center">
						<view class="box" style="background-color: #2A82E4; "></view>
						<view class="text1">台式收银机</view>
						<view class="text1">
							{{order_channel_type==0?'￥'+(order_channel_data.aio_sale_amount||'0'):(order_channel_data.aio_sale_count||'0')+"笔"}}
						</view>
						<view class="text1">{{(getChannelFlex(2)*100).toFixed(2)*1}}%</view>
					</view>
				</view>
			</view>


			<view class="box">
				<view class="title-box flex-row-center">
					畅销商品排名 
				</view>
				<view v-if="!goods_datas || (goods_datas && goods_datas.length &&  goods_datas[0].goods_num == 0)" class="flex-column" style="margin-top: 20rpx;margin-bottom: 10rpx;width: 100%;text-align: center;color: #999999;">
					暂无畅销商品
				</view>
				<view v-else class="flex-column" style="margin-top: 10rpx;width: 100%;">
					<view class="goods_item flex-row-center" v-for="(item,index) in goods_datas" v-show="item.goods_num">
						<image :src="'/static/ranking'+index+'.png'"></image>
						<view class="flex-column" style="width: 100%;">
							<text class="text ellipsis-line2">{{item.goods_name}}</text>


							<view class="flex-row-center" style="width: 100%; ">
								<view class="ratio"
									:style="{'flex':getgoodsItemFlex(item.goods_num),'backgroundColor':goods_ratio_colors[index]}">
								</view>
								<text class="text">{{item.goods_num}}</text>
							</view>

						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<mx-date-picker :show="showPicker" type="range" :value="value" :show-tips="true" :begin-text="'开始'"
			:end-text="'结束'" :show-seconds="true" @confirm="onSelected" @cancel="onSelected" />

		<report-alert :title="dialogTitle" :message="dialogMessage" :show="dialogShow"  @leftAction="dialogShow=false"></report-alert>
	</view>
</template>

<script>
	import dsBridge from 'dsbridge'
	// import HistogramChart from '@/components/stan-ucharts/HistogramChart.vue';
	import LineChart from '@/components/stan-ucharts/LineChart.vue';
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
	import RingChart from '@/components/stan-ucharts/RingChart.vue';
	export default {
		name: 'Index',
		components: {
			// HistogramChart,
			LineChart,
			MxDatePicker,
			RingChart
		},
		data() {
			return {
				goods_ratio_colors: ["#E22417", "#FF9E3A", "#F0D807", "#F7A794", "#A8D1FF"],
				goods_datas: [
					// {
					// 	"goods_name": "临时商品",
					// 	"ctual_amount": 254.00,
					// 	"goods_barcode": "1358507575602",
					// 	"goods_num": 254,
					// 	"refund_amount": null,
					// 	"brand_name": "临时品牌",
					// 	"already_refund_num": null
					// },
					// {
					// 	"goods_name": "椰树牌椰汁",
					// 	"ctual_amount": 20.63,
					// 	"goods_barcode": "6957735788861",
					// 	"goods_num": 24,
					// 	"refund_amount": 2.70,
					// 	"brand_name": "临时品牌",
					// 	"already_refund_num": 0
					// }
				],
				order_channel_data: {
					// "aio_sale_count": 33,
					// "android_sale_amount": 0.00,
					// "sale_count": 33,
					// "android_sale_count": 0,
					// "ios_sale_count": 0,
					// "sale_total": 2296.19,
					// "aio_sale_amount": 2398.19,
					// "ios_sale_amount": -102.00
				},
				order_channel_type: 0, //0 额，1 笔数
				pieData: null,
				start_time: this.$dateFormat(new Date(),'yyyy-MM-dd'),
				end_time: this.$dateFormat(new Date(),'yyyy-MM-dd'),
				showPicker: false,
				date: '2019/01/01',
				time: '15:00:12',
				datetime: '2019/01/01 15:00:12',
				range: ['2019/01/01', '2019/01/06'],
				rangetime: ['2019/01/08 14:00', '2019/01/16 13:59'],
				type: 'rangetime',
				value: '',
				lineData: null,
				datas: [],
				page: 1,
				searchStr: '',
				isRecharge: false,
				isSelect: false,
				dataInfo: {},
				stats_data: {},
				sale_count_all_total: 0,
				sale_amount_all_total: 0,
				dialogTitle: '',
				dialogMessage: '',
				dialogShow: false
			}

		},

		onLoad(options) {
			this.isRecharge = options?.isRecharge ?? false
			this.isSelect = options?.isSelect ?? false
			this.getData()
			this.getPayMethod()
			this.getChannel()
			this.getGoodsData()
		},
		methods: {

			showDialog(type) {
				this.dialogShow = false
				if (type == 0) {
					this.dialogTitle = "营业收入"
					this.dialogMessage =
						"【实收总额】：周期内，实收总额为实际收到的金额，不包括会员卡消费，实收总额=会员充值-会员调额+现金收入+支付宝账户+微信账户+其他收入。 \n\n 【销售总额】：周期内，销售总额为商品实际的金额，不包括会员卡的充值，当售后退款时，需减少退款的销售额；销售总额=会员卡消费+现金收入+支付宝账户+微信账户+其他收入。\n\n【充值总额】：周期内，会员充值和手动充值的充值总额，不包括充值赠送的金额，手动扣减储值金额也不减少。 \n\n【退款总额】：周期内，所有支付方式的退款总额。"
				} else if (type == 1) {
					this.dialogTitle = "销售概况"
					this.dialogMessage =
						"【销售总额】：周期内，销售总额为商品实际销售的金额，不包括会员卡充值，当售后退款时，需减少退款的销售额；销售总额=会员卡消费+现金收入+支付宝账户+微信账户+其他收入。\n【销售总笔数】：周期内，所有销售支付订单的总笔数，当订单售后部分退款时，销售笔数不减少，当订单售后全部退款成功时，销售笔数减少1。"
				} else if (type == 2) {
					this.dialogTitle = "支付方式"
					this.dialogMessage = "【支付方式统计】：根据支付方式统计的收款金额，如果有退款，减去成功退款的金额。"

				 } else if (type == 3) {
					this.dialogTitle = "订单渠道来源"
					this.dialogMessage = "【订单渠道来源】：周期内，通过渠道来源统计的订单。"
				}
				this.dialogShow = true
			},

			getgoodsItemFlex(number) {
				let amount = 0.0
				for (let i in this.goods_datas) {
					amount += (this.goods_datas[i].goods_num)
				}
				if (number <= 0) return 0;
				return number / amount
			},
			getChannelFlex(index) {
				let number = 0
				let amount = 0.0
				if (this.order_channel_type == 0) {
					amount += (this.order_channel_data.android_sale_amount || 0)
					amount += (this.order_channel_data.ios_sale_amount || 0)
					amount += (this.order_channel_data.aio_sale_amount || 0)
					if (index == 0)
						number = (this.order_channel_data.android_sale_amount || 0)
					else if (index == 1)
						number = (this.order_channel_data.ios_sale_amount || 0)
					else if (index == 2)
						number = (this.order_channel_data.aio_sale_amount || 0)

				} else {
					amount += (this.order_channel_data.android_sale_count || 0)
					amount += (this.order_channel_data.ios_sale_count || 0)
					amount += (this.order_channel_data.aio_sale_count || 0)
					if (index == 0)
						number = (this.order_channel_data.android_sale_count || 0)
					else if (index == 1)
						number = (this.order_channel_data.ios_sale_count || 0)
					else if (index == 2)
						number = (this.order_channel_data.aio_sale_count || 0)
				}
				if (number <= 0) return 0;
				return (number || 0) / amount
			},

			onSelected(e) { //选择
				this.showPicker = false;
				if (e) {
					this[this.type] = e.value;
					//选择的值
					console.log('value => ' + e.value);
					//原始的Date对象
					console.log('date => ' + e.date);

					this.start_time = e.value[0].replaceAll("/", "-")
					this.end_time = e.value[1].replaceAll("/", "-") 
					this.getData()
					this.getPayMethod()
					this.getChannel()
					this.getGoodsData()
				}
			},


			itemOpenEye(item) {
				item.openEye = !(item.openEye ?? false)
				this.$forceUpdate()
			},
			itemOnClick(item) {
				if (this.isSelect) {
					dsBridge.call("JsCallBack", {
						"action": "vip-list",
						"data": item
					}, function(res) {

					})
					return;
				}

				if (this.isRecharge) {
					let info = JSON.stringify(item)
					uni.setStorageSync("vip-user", info)
					this.$navigateTo('/pages/vip/recharge')
				} else
					this.$navigateTo('/pages/vip/vip-detail?id=' + item.id)
			},
			doSearch() {
				this.getData()
				this.getPayMethod()
				this.getChannel()
			},
			getPayMethod() {
				uni.showLoading({
					title: "加载中..."
				})

				this.$apiPost("/retail/select/srvretail_app_pay_method_select", {
					"serviceName": "srvretail_app_pay_method_select",
					"colNames": [
						"*"
					],
					"relation_condition": {
					    "relation": "AND",
					    "data": this.end_time.length == 0 ? []:[
					      {
					        "colName": "start_date",
					        "ruleType": "ge",
					        "value": this.start_time
					      },
					      {
					        "colName": "end_date",
					        "ruleType": "le",
					        "value": this.end_time + " 23:59",
					      }
					    ]
					  },
					"page": {
						"pageNo": 1,
						"rownumber": 10
					}
				}).then(res => {
					uni.hideLoading()
					if (res.state == "SUCCESS") {
						let series = [{
								name: '现金：' + res.data[0].cash_total,
								data: res.data[0].cash_total
							},
							{
								name: '微信：' + res.data[0].wechat_total,
								data: res.data[0].wechat_total
							},
							{
								name: '和包：' + res.data[0].package_total,
								data: res.data[0].package_total
							},
							{
								name: '支付宝：' + res.data[0].alipay_total,
								data: res.data[0].alipay_total
							},
							{
								name: '会员支付：' + res.data[0].member_total,
								data: res.data[0].member_total
							}



						];
						this.pieData = {
							series: series
						}

					}
				})
			},
			getGoodsData() {
				uni.showLoading({
					title: "加载中..."
				})

				this.$apiPost("/retail/select/srvretail_product_reaport_info_select", {
					"serviceName": "srvretail_product_reaport_info_select",
					"colNames": [
						"*"
					],
					"relation_condition":this.end_time.length==0?{}:{
						"relation": "AND",
						"data": [{
							"colName": "create_time",
							"ruleType": "between",
							"value": [this.start_time, this.end_time + " 23:59"]
						}]
					},
					"page": {
						"pageNo": 1,
						"rownumber": 5
					}
				}).then(res => {
					uni.hideLoading()
					if (res.state == "SUCCESS") {
						this.goods_datas = res.data
					}
				})
			},

			getChannel() {
				uni.showLoading({
					title: "加载中..."
				})

				this.$apiPost("/retail/select/srvretail_business_channel_overview_select", {
					"serviceName": "srvretail_business_channel_overview_select",
					"colNames": [
						"*"
					],
					"relation_condition": {
						"relation": "AND",
						"data": this.end_time.length == 0 ? [] :[
						  {
							"colName": "start_date",
							"ruleType": "ge",
							"value": this.start_time,
						  },
						  {
							"colName": "end_date",
							"ruleType": "le",
							"value": this.end_time + " 23:59",
						  }
						]
					  },
					"page": {
						"pageNo": 1,
						"rownumber": 10
					}
				}).then(res => {
					uni.hideLoading()
					if (res.state == "SUCCESS") {
						this.order_channel_data = res.data[0]
					}
				})
			},
			//获取两日期之间日期列表函数
			getdiffdate(stime,etime){
				//初始化日期列表，数组
				var diffdate = new Array();
				var i=0;
				//开始日期小于等于结束日期,并循环
				while(stime<=etime){
					diffdate[i] = {date:stime};
					
					//获取开始日期时间戳
					var stime_ts = new Date(stime).getTime();
					//增加一天时间戳后的日期
					var next_date = stime_ts + (24*60*60*1000);
					
					//拼接年月日，这里的月份会返回（0-11），所以要+1
					var next_dates_y = new Date(next_date).getFullYear()+'-';
					var next_dates_m = (new Date(next_date).getMonth()+1 < 10)?'0'+(new Date(next_date).getMonth()+1)+'-':(new Date(next_date).getMonth()+1)+'-';
					var next_dates_d = (new Date(next_date).getDate() < 10)?'0'+new Date(next_date).getDate():new Date(next_date).getDate();
			
					stime = next_dates_y+next_dates_m+next_dates_d;
					
					//增加数组key
					i++;
				}
				diffdate.reverse();
				return diffdate;
			},
			getData() {
				uni.showLoading({
					title: "加载中..."
				})

				this.$apiPost("/retail/select/srvretail_business_overview_select", {
					"serviceName": "srvretail_business_overview_select",
					"colNames": [
						"*"
					],
					"condition": this.end_time.length == 0 ? [] : [{
						"colName": "date",
						"value": this.start_time,
						"ruleType": "ge"
					}, {
						"colName": "date",
						"value": this.end_time + " 23:59",
						"ruleType": "le"
					}],
					"page": {
						"pageNo": 1,
						"rownumber": 10
					}
				}).then(res => {
					uni.hideLoading()
					if (res.state == "SUCCESS") {
						this.stats_data = {
							a: res.stats_data[0].value,
							b: res.stats_data[1].value,
							d: res.stats_data[2].value,
							c: res.stats_data[3].value,
						}
						if(res.data && res.data.length){
							this.datas = res.data;
						} else {
							this.datas = this.getdiffdate(this.start_time,this.end_time);
						}
						
						let amountTatal = 0;
						let countTatal = 0;
						let amounts = [];
						let counts = [];
						let xAxisLables = [];

						for (let i = this.datas.length - 1; i >= 0; i--) {
							let item = this.datas[i]
							xAxisLables.push(item.date)
							counts.push(item.sale_count_total||0)
							amounts.push(item.sale_amount_total||0)
							amountTatal += item.sale_amount_total||0
							countTatal += item.sale_count_total||0
						}

						this.sale_amount_all_total = amountTatal.toFixed(2) * 1;
						this.sale_count_all_total = countTatal.toFixed(2) * 1;
						this.lineData = {
							//柱状图Compent  //label应为series value 应为
							label: xAxisLables,
							value: [{
									name: '销售额',
									data: amounts
								},
								{
									name: '销售总笔数',
									data: counts
								}
							]
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.ellipsis-line2{
		overflow: hidden;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}
	.fliter-box {
		margin-right: 24rpx;

		image {
			width: 32rpx;
			height: 32rpx;
			margin-left: 40rpx;
			margin-right: 10rpx;
		}

		text {
			font-size: 36rpx;
			font-weight: 700;
			color: rgba(255, 255, 255, 1);
		}
	}

	.search-box {
		flex: 1;
		height: 80rpx;
		border-radius: 40rpx;
		background: #FFFFFF;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-left: 39rpx;

		}

		.input {
			flex: 1;
			font-size: 28rpx;
			font-weight: 500;
			margin-left: 40rpx;
			color: rgba(153, 153, 153, 1);
		}

		.qrimag {
			width: 52rpx;
			height: 52rpx;
			margin-right: 40rpx;
		}
	}

	.tab-box {
		height: 100rpx;
		opacity: 1;
		background: rgba(255, 255, 255, 1);
		justify-content: center;
		padding-left: 72rpx;
		padding-right: 72rpx;

		.item {
			padding-top: 32rpx;
			flex: 1;

			.bubble {

				min-width: 24rpx;
				height: 24rpx;
				background: rgba(212, 48, 48, 1);
				color: white;
				font-size: 20rpx;
				line-height: 24rpx;
				border-radius: 12rpx;
				font-weight: 500;
				text-align: center;
				top: -13rpx;
				right: -20rpx;
				position: absolute;

			}

			.unchecktxt {
				position: relative;
				font-size: 30rpx;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);
			}

			.checktxt {
				position: relative;
				font-size: 30rpx;
				font-weight: 700;
				color: rgba(56, 192, 158, 1);
			}

			.in {
				margin-top: 4rpx;
				width: 48rpx;
				height: 6rpx;
				background-color: rgba(56, 192, 158, 1);
				;
				border-radius: 3rpx;
			}
		}
	}

	.box {
		padding: 24rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		border-radius: 12rpx;
		margin-top: 24rpx;
		margin-left: 24rpx;
		width: 702rpx;
		position: relative;

		.title-box {
			color: rgba(47, 47, 47, 1);
			font-size: 36rpx;
			font-weight: 700;

			image {
				width: 18px;
				height: 18px;
				margin-left: 10rpx;
			}
		}

		.box-total {
			.item {
				.text {
					font-size: 26rpx;
					font-weight: 700;
					color: rgba(153, 153, 153, 1);
				}

				.text1 {
					margin-top: 4rpx;
					font-size: 40rpx;
					font-weight: 700;
					color: rgba(34, 34, 34, 1);
				}

				.line {
					width: 2rpx;
					height: 60rpx;
					background-color: rgba(241, 241, 241, 1);
				}
			}
		}


		.xs-total {
			.text {
				font-size: 26rpx;
				font-weight: 700;
				color: rgba(153, 153, 153, 1);
			}

			.text1 {
				margin-top: 4rpx;
				font-size: 32rpx;
				font-weight: 700;
				color: rgba(226, 36, 23, 1);
			}
		}

		.xs-channel-total {
			.text {


				font-size: 30rpx;
				font-weight: 700;
				color: #999999;
			}

			.text1 {
				font-size: 30rpx;
				font-weight: 700;
				color: #E22417;
			}


		}

		.xs-channel-switch {
			background: #F5F5F7;

			border: 2rpx solid #F9F9F9;
			width: 236rpx;
			height: 76rpx;
			opacity: 1;
			padding: 8rpx;
			box-sizing: border-box;
			border-radius: 60rpx;
			position: absolute;
			top: 30rpx;
			right: 22rpx;

			.check {
				width: 116rpx;
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
				border-radius: 30px;
				background: #FFFFFF;
				color: #2F2F2F;
			}

			.uncheck {
				width: 116rpx;
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
				border-radius: 30px;
				color: rgba(153, 153, 153, 1);
				;
			}
		}

		.chart {
			margin-top: 44rpx;
			margin-left: 70rpx;
			margin-right: 70rpx;
			height: 64rpx;
		}

		.chart-lable {
			.item1 {
				justify-content: center;
				align-items: center;
				margin-top: 10rpx;
				margin-left: 10rpx;

				.box {
					padding: 0rpx;
					width: 28rpx;
					height: 28rpx;
					margin-right: 8rpx;
					border-radius: 4rpx;
				}

				.text1 {
					flex: 1;
					height: 28rpx;
					line-height: 48rpx;
					font-size: 24rpx;
					font-weight: 700;
					color: rgba(47, 47, 47, 1);
				}
			}

		}

		.goods_item {
			width: 100%;

			image {
				width: 80rpx;
				height: 80rpx;
				margin-right: 18rpx;
				margin-top: 30rpx;
			}

			.text {
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(47, 47, 47, 1);
			}

			.ratio {
				width: 480rpx;
				height: 22rpx;
				border-radius: 50rpx;
				margin-right: 16rpx;
			}
		}
	}
</style>
